<template>
  <div class="content">

    <el-form :inline="true" :model="queryForm">
      <el-form-item label="">
        <el-input v-model="queryForm.loginName" placeholder="请输入账号" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadUserList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveUser(null)">添加员工</el-button>
    </div>
    <el-table :data="userList" stripe>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="loginName" label="账号" />
      

      <el-table-column label="状态" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.status == '0' }">
            {{ scope.row.status == '0' ? '禁用' : '启用' }}
          </div>
        </template>
      </el-table-column>
      

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" @click="handleSaveUser(scope.row.id)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          <el-button size="small" type="danger" @click="handleUpdateStatus(scope.row.id,scope.row.status==1?'inactive':'active')">
            {{ scope.row.status == '1' ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup>  
import { reactive, ref } from "vue";  
import { useRouter } from "vue-router";  
import { ElMessage, ElMessageBox } from 'element-plus';  
import { getUserList, deleteUserById,updateStatus } from "@/api/user";  
  
const router = useRouter();  
const queryForm = reactive({ loginName: "", page: 1, pageSize: 10 });  
  
let userList = reactive([]);  
let total = ref(0);  
  
const handleSaveUser = (userId) => {  
  if (userId) {  
    // 编辑  
    router.push({ path: '/user/save', query: { userId: userId } });  
  } else {  
    // 添加  
    router.push({ path: '/user/save' });  
  }  
}  
  
const handleDelete = (userId) => {  
  // 确认对话框  
  ElMessageBox.confirm(  
    "是否删除?",  
    '提示',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  ).then(() => {  
    // 发送请求  
    deleteUserById(userId).then(resp => {  
      loadUserList();  
    });  
  }).catch(() => {  
  });  
}  
  
const handleUpdateStatus = (userId, status) => {  
  // 确认对话框  
  ElMessageBox.confirm(  
    "是否修改状态?",  
    '提示',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  ).then(() => {  
    updateStatus(userId, status).then(resp => {  
      loadUserList();  
    });  
  }).catch(() => {  
  });  
}  
  
// 定义方法  
const loadUserList = () => {  
  // 准备数据  
  getUserList(queryForm).then(resp => {  
    // 假设resp是后端返回的Result对象，但可能不包含code属性  
    // 我们通过检查resp.msg来判断是否成功  
    if (resp.msg === "成功") {  
      // 如果成功，处理数据  
      userList.length = 0;  
      userList.push(...resp.data); // 假设resp.data是用户列表  
      total.value = resp.total; // 假设resp.total是总记录数  
    } else {  
      // 如果失败，显示错误信息  
      ElMessage.error(resp.msg); // 显示错误信息，这里会是"没有找到相关信息"  
      userList.length = 0; // 清空列表  
      total.value = 0; // 重置总记录数（但实际上后端可能已经返回了0）  
    }  
  }).catch(error => {  
    // 处理请求错误  
    ElMessage.error('加载用户列表失败');  
    console.error('加载用户列表出错:', error);  
    userList.length = 0; // 清空列表  
    total.value = 0; // 重置总记录数  
  });  
}
  
const handleSizeChange = (pageSize) => {  
  queryForm.pageSize = pageSize;  
  loadUserList();  
}  
  
const handlePageChange = (page) => {  
  queryForm.page = page;  
  loadUserList();  
}  
  
loadUserList();  
</script>

<style scoped>
</style>
